<template>
  <div class="page">
    <div id="Ring"></div>
    <div id="GroupBar"></div>
  </div>
</template>

<script>
export default {
  name: 'Table',
  methods: {
    async createGroupBar() {
      const { GroupBar } = window.G2Plot;
      const data = [
        { type: 'a', quarter: 'Q1', value: 100 },
        { type: 'a', quarter: 'Q2', value: 70 },
        { type: 'a', quarter: 'Q3', value: 20 },
        { type: 'b', quarter: 'Q1', value: 10 },
        { type: 'b', quarter: 'Q2', value: 50 },
        { type: 'b', quarter: 'Q3', value: 40 },
        { type: 'c', quarter: 'Q1', value: 30 },
        { type: 'c', quarter: 'Q2', value: 50 },
        { type: 'c', quarter: 'Q3', value: 20 },
      ];
      const group_bar = new GroupBar('GroupBar', {
        data,
        xField: 'value',
        yField: 'type',
        groupField: 'quarter',
      });
      group_bar.render();
      return Promise.resolve();
    },
    async createGauge() {
      const { Ring } = window.G2Plot;
      const data = [
        {
          type: '分类一',
          value: 27,
        },
        {
          type: '分类二',
          value: 25,
        },
        {
          type: '分类三',
          value: 18,
        },
        {
          type: '分类四',
          value: 15,
        },
        {
          type: '分类五',
          value: 10,
        },
        {
          type: '其它',
          value: 5,
        },
      ];
      const ring = new Ring('Ring', {
        data,
        innerRadius: 0.6,
        angleField: 'value',
        colorField: 'type',
      });
      ring.render();
      return Promise.resolve();
    },
  },
  mounted() {
    Promise.all([this.createGroupBar(), this.createGauge()]);
  },
};
</script>

<style lang="less" scoped>
.page {
  box-sizing: border-box;
  padding-right: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: teal;
  height: 100%;
}

#GroupBar,
#Ring {
  width: 42%;
  height: 280px;
  box-sizing: border-box;
}
</style>
